@charset "utf-8";
@import "common/reset";
@import "common/common";
body{
//  overflow: hidden;
}
.friend_web{
    position: relative;
    width: 640px;
    height: 100%;
    background:  no-repeat left top/100% 100%;
    .userImg{
        position: absolute;
        width: 580px;
        height:580px;
        top:130px;
        left: 30px;
        z-index: 2;
        background: url(../images/zi_wai_kuang.png) no-repeat center;
        img{
            width: 100%;
            height: 100%;
        }
    }
    //分数
    .userScore{
        position: absolute;
        bottom:15%;
        width: 80%;
        left: 10%;
        .showScore{
            position: relative;
            z-index: 2;
            display: inline-block;
            vertical-align: middle;
            width: 143px;
            height: 143px;
            text-align: center;
            line-height: 130px;
            font-size: 65px;
            color: #e30920;
            background: url(../images/userScore_circle.png) no-repeat center/100% 100%;
        }
        .showText{
            overflow: hidden;
            box-sizing: border-box;
            position: relative;
            display: inline-block;
            vertical-align: middle;
            height: 78px;
            font-size: 20px;
            line-height: 26px;
            padding: 13px 30px 10px;
            width: 340px;
            background: url(../images/userScore_squre.png) no-repeat center/100% 100%;
            margin-left: -30px;
            
        }
        
    }
    //按钮
    .btns{
        position: absolute;
        width: 100%;
        bottom: 6%;
        left: 0;
        text-align: center;
        //写字前按钮
        .btn{
            position: relative;
            display: inline-block;
            width:310px;
            height: 75px;
            line-height: 70px;
//          background: url(../images/friend_btn_bg.png) no-repeat left top/100% 100%;
            img{
                vertical-align: middle;
            }
            //烟花效果
            .yanhua{
                width: 156px;
                position: absolute;
                top: 0;
                left: 50%;
                transform: translateX(-50%) ;
                transform-origin: center;
                display: none;
            } 
        }
    }
}
